<template>
  <view class="container">
    <view class="signature-box">
      <uni-easyinput 
        type="textarea" 
        v-model="userInfoEdit.remark" 
        placeholder="请输入个性签名（最多50字）"
        maxlength="50"
        :inputBorder="false"
        :styles="textareaStyles"
        @input="checkLength"
        focus
      ></uni-easyinput>
      <view class="counter">{{ userInfoEdit.remark.length }}/50</view>
    </view>
    
    <!-- 固定在底部的完成按钮 -->
    <view class="footer">
      <button 
        class="confirm-btn" 
        :class="{ 'disabled': !userInfoEdit.remark }" 
        @click="handleConfirm"
      >完成</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const userInfoEdit = ref({
  remark: ""
});

onLoad((options) => {
  // 获取传递过来的简介内容
  if(options.remark) {
    userInfoEdit.value.remark = decodeURIComponent(options.remark);
  }
});

const textareaStyles = ref({
  color: '#333',
  fontSize: '16px',
  placeholderColor: '#999',
  backgroundColor: 'transparent',
  height: '120px'
});

const checkLength = () => {
  if (userInfoEdit.value.remark.length > 50) {
    userInfoEdit.value.remark = userInfoEdit.value.remark.slice(0, 50);
  }
};

const handleConfirm = () => {
  if (!userInfoEdit.value.remark.trim()) return;
  
  // 获取当前页面栈
  const pages = getCurrentPages();
  const prevPage = pages[pages.length - 2]; // 上一页实例
  
  // 直接调用上一页的方法更新数据
  if (prevPage && prevPage.$vm.updateRemark) {
    prevPage.$vm.updateRemark(userInfoEdit.value.remark);
  }
  
  // 返回上一页
  uni.navigateBack();
  
  uni.showToast({
    title: '保存成功',
    icon: 'success'
  });
};
</script>

<style scoped lang="scss">
/* 样式保持不变 */
.container {
  padding: 15px;
  background-color: #f5f5f5;
  height: 100vh;
  position: relative;
  padding-bottom: 80px;
}

.signature-box {
  background-color: #fff;
  border-radius: 8px;
  padding: 12px;
  position: relative;
  
  ::v-deep .uni-easyinput__content-textarea {
    padding: 0;
    line-height: 1.5;
  }
  
  ::v-deep .uni-textarea-textarea {
    min-height: 100px;
  }
}

.counter {
  text-align: right;
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  background-color: #f5f5f5;
  z-index: 10;
}

.confirm-btn {
  width: 100%;
  height: 44px;
  line-height: 44px;
  background-color: #07C160;
  color: white;
  border-radius: 44rpx;
  font-size: 16px;
  border: none;
  
  &:active {
    background-color: #06AD56;
  }
  
  &.disabled {
    background-color: #D1D1D1;
    color: #FFFFFF;
  }
}
</style>